<template>
  <el-form size="small" ref="form" :model="form" label-width="0" label-position="left">
    <div class="text-right">
      <el-button icon="el-icon-plus" type="primary" size="mini" style="width:100px" @click="handleAdd">新增货物</el-button>
    </div>
    <el-table
      :data="form.list"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="articleNumber"
        label="货号"
        min-width="120">
        <template slot-scope="scope">
          <el-input v-model="scope.row.articleNumber" disabled placeholder="货号"></el-input>                         
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="goodsName"
        label="货物名称"
        min-width="120">
        <template slot-scope="scope">
          <el-input v-model="scope.row.goodsName" disabled placeholder="货物名称"></el-input>                         
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="package"
        label="包装"
        min-width="120">
        <template slot-scope="scope">
          <el-select disabled style="width:100%" v-model="scope.row.package" placeholder="包装">
            <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>                         
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="count"
        label="货物数量"
        min-width="120">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <el-input
              style="width:85%"
              v-model="scope.row.count"
              @input="limitInput($event,scope.row,'count')"
              clearable
              placeholder="货物数量"
            />件
          </el-form-item>                           
        </template>        
      </el-table-column>
      <el-table-column
        align="center"
        prop="weight"
        label="货物重量"
        min-width="120">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <el-input
              style="width:85%"
              v-model="scope.row.weight"
              @input="limitInput($event,scope.row,'weight')"
              clearable
              placeholder="货物重量"
            />吨
          </el-form-item>                           
        </template>  
      </el-table-column>
      <el-table-column
        align="center"
        prop="volume"
        label="货物体积"
        min-width="160">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <el-input
              style="width:75%"
              v-model="scope.row.volume"
              @input="limitInput($event,scope.row,'volume')"
              clearable
              placeholder="货物体积"
            />立方
          </el-form-item>                           
        </template> 
      </el-table-column>
      <el-table-column
        align="center"
        prop="relatedAccessories"
        label="产品手册"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <UploadFile
              :data="{}"
              :size="10"
              :limit="3"
              accept=".png, .jpg, .jpeg, .gif, .pdf, .doc, .docx"
              :file-list="scope.row.relatedAccessories"
            >
            </UploadFile>
          </el-form-item>                           
        </template>  
      </el-table-column>
      <el-table-column
        align="center"
        prop="relatedAccessories"
        label="质检报告"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <UploadFile
              :data="{}"
              :size="10"
              :limit="3"
              accept=".png, .jpg, .jpeg, .gif, .pdf, .doc, .docx"
              :file-list="scope.row.relatedAccessories"
            >
            </UploadFile>
          </el-form-item>                           
        </template>  
      </el-table-column>
      <el-table-column
        align="center"
        prop="relatedAccessories"
        label="其他材料"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <UploadFile
              :data="{}"
              :size="10"
              :limit="3"
              accept=".png, .jpg, .jpeg, .gif, .pdf, .doc, .docx"
              :file-list="scope.row.relatedAccessories"
            >
            </UploadFile>
          </el-form-item>                           
        </template>  
      </el-table-column>
      <el-table-column
        align="center"
        prop="action"
        label="操作"
        width="100"
        fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleReduce(scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
import UploadImage from '@/components/UploadImage/uploadImage.vue';
import UploadFile from '@/components/UploadFile';
import { randomString } from "@/utils/zito"
export default {
  name: "GoodsTable",
  components: {
    UploadImage,
    UploadFile,
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      form: {
        list: this.data
      },
    };
  },
  created() {
  },
  methods: {
    handleValidate() {
      return new Promise((resolve) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        });
      })
    },
    limitInput(value,row,name) {
      row[name] = ('' + value) // 第一步：转成字符串
            .replace(/[^\d]/g, "") // 只能输入数字
            .replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
    },
    handleAdd() {
      this.form.list.push({
        uuid: randomString(32)
      })
    },
    handleReduce(index) {
      this.form.list.splice(index, 1)
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
